<template>
    <div id="bank-information">
        <div id="header-content">
            <el-form label-width="90px" ref="queryForm" :model="searchParam">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="发行人名称:" prop="cIssueName">
                            <el-select
                                v-model="searchParam.cIssueName"
                                filterable
                                clearable
                                remote
                                size="mini"
                                style="width: 100%"
                                :remote-method="getOpponentCode"
                                @clear="getIssueName('')"
                            >
                                <el-option v-for="(item, index) in issueNameSelect" :key="index" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="发行人分组:" prop="cIssueGroup">
                            <el-select v-model="searchParam.cIssueGroup" clearable placeholder="请选择" size="mini" style="width: 100%">
                                <el-option v-for="i in cIssueGroups" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="内部评级:" prop="cInnerGrade2">
                            <el-select v-model="searchParam.cInnerGrade2" filterable clearable style="width: 100%" size="mini">
                                <el-option v-for="(item, index) in instructionSelect" :key="index" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="外部评级:" prop="cOuterGrade2">
                            <el-select v-model="searchParam.cOuterGrade2" filterable clearable size="mini" style="width: 100%">
                                <el-option v-for="(item, index) in outerAppraiseSelect" :key="index" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="4">
                        <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
                        <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
                        <el-button type="primary" size="mini" @click="handleButton('refresh')">刷新</el-button>
                    </el-col> -->
                </el-row>
            </el-form>
            <div class="btn">
                <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
                <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
                <el-button type="primary" size="mini" @click="handleButton('refresh')">刷新</el-button>
            </div>
        </div>
        <div id="main-content">
            <div class="content-table">
                <el-table
                    auto-resize
                    resizable
                    stripe
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    style="cursor: pointer; width: 100%"
                    highlight-current-row
                    highlight-hover-row
                    :data="dataSource"
                    :default-sort="{ prop: sortProp, order: sortOrder }"
                    @sort-change="changeTableSort"
                >
                    <el-table-column prop="cIssueCode" label="发行人编号" width="130" show-overflow-tooltip sortable="custom"> </el-table-column>
                    <el-table-column prop="cIssueName" label="发行人名称" width="130" show-overflow-tooltip sortable="custom"> </el-table-column>
                    <el-table-column prop="fullName" label="发行人全称" width="180" show-overflow-tooltip sortable="custom"> </el-table-column>
                    <el-table-column
                        prop="nNetAsset"
                        label="发行人净资产"
                        :formatter="setFormat"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="nTotalAsset"
                        label="发行人总资产"
                        :formatter="setFormat"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="enAssetLiabilityRatio"
                        label="资产负债率(%)"
                        :formatter="getValueIs"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="enLastYearNet"
                        label="上一年度净利润"
                        :formatter="setFormat"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="lastquarterAsset"
                        label="上一季度末净资产"
                        :formatter="setFormat"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="cAssetCurrencyNo"
                        label="净资产币种"
                        width="180"
                        :formatter="getValueIs"
                        show-overflow-tooltip
                        sortable="custom"
                    >
                    </el-table-column>
                    <el-table-column prop="cCountryNo" label="发行人国家" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cOuterGrade2" label="外部评级" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column
                        prop="cAppraiseOrgan"
                        label="外部评级机构"
                        :formatter="getValueIs"
                        width="180"
                        show-overflow-tooltip
                        sortable="custom"
                    >
                    </el-table-column>
                    <el-table-column prop="cInnerGrade2" label="内部评级" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cLinkman" label="发行人联系人" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cPhone" label="发行人联系电话" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cFax" label="发行人传真" :formatter="getValueIs" width="180" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                </el-table>
            </div>
            <RiskPagination :paging="pages" @page-change="handleCurrentChange"></RiskPagination>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { thousandsFormat, debounce } from '@/utils/tools';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'IssuerInformation',
    components: {
        RiskPagination,
    },
})
export default class IssuerInformation extends Vue {
    @Prop() instructionSelect: any;
    @Prop() outerAppraiseSelect: any;
    thousandsFormat = thousandsFormat;
    bankName: string = '';
    internalRating: string = '';
    externalRating: string = '';
    private showFieldList: any[] = []; // 要显示的表格列
    private dataSource: any[] = []; // 指令表数据
    private sortProp: string = ''; // 排序字段
    private sortOrder: string = ''; // 排序方式
    private issueNameSelect: any[] = []; // 发行人名称下拉框
    // private instructionSelect: any[] = []; // 内部评级下拉框
    // private outerAppraiseSelect: any[] = []; // 外部评级下拉框
    tableLoading: boolean = false;
    // 分页
    private pages: pages = {
        pageSize: 50,
        currentPage: 1,
        total: 0,
    };
    // 默认展示明细字段
    private searchParam = {
        cInnerGrade2: '',
        cIssueName: '',
        cOuterGrade2: '',
        cIssueGroup: '',
        paging: {
            currentPage: 0,
            pageSize: 0,
        },
        sort: 'to_number(C_ISSUE_CODE) ASC',
    }; // 查询条件

    cIssueGroups: any[] = [];

    mounted() {
        this.getInstruction(this.searchParam, this.pages);
        this.getIssueName('');
        this.getcIssueGroups();
        // this.getInsideAppraise();
        // this.getOuterAppraise();
    }

    // 按钮点击
    async handleButton(type: string) {
        if (type == 'reset') {
            // (this.$refs['searchParam'] as any).resetFields();
            (this.$refs.queryForm as any).resetFields();
            this.getIssueName('');
        } else if (type == 'search') {
            await this.pageChange(1);
        } else if (type == 'refresh') {
            await this.pageChange(1);
        }
    }
    async pageChange(curPage: number) {
        this.pages.currentPage = curPage;
        // if (this.searchParam.cInnerGrade2 != '' || this.searchParam.cOuterGrade2 != '') {
        //     this.searchParam.cInnerGrade2 = this.getKeyValue(this.searchParam.cInnerGrade2);
        //     this.searchParam.cOuterGrade2 = this.getKeyValue(this.searchParam.cOuterGrade2);
        // }
        await this.getInstruction(this.searchParam, this.pages);
    }
    getKeyValue(value) {
        let indexCurrent = value.indexOf(' ');
        let keyValue = value.slice(0, indexCurrent);
        return keyValue;
    }
    //  获取发行人信息列表
    private getInstruction(param: any, paging: any): void {
        this.tableLoading = true;
        this.$axios
            .post('/tnIssueExtra/list/data', {
                // ...param,
                cInnerGrade2: this.getKeyValue(this.searchParam.cInnerGrade2),
                cIssueName: this.searchParam.cIssueName,
                cOuterGrade2: this.getKeyValue(this.searchParam.cOuterGrade2),
                cIssueGroup: this.searchParam.cIssueGroup,
                sort: this.searchParam.sort,
                paging: paging,
            })
            .then((res: any) => {
                // for (let i = 0; i < res.list.length; i++) {
                //     console.log(res.list[i].cIssueCode);
                // }
                if (res.list && res.list.length > 0) {
                    this.dataSource = res.list;
                    this.pages.total = res.total;
                    this.tableLoading = false;
                } else {
                    this.dataSource = [];
                    this.pages.total = 0;
                    this.tableLoading = false;
                }
            })
            .catch(() => {
                this.tableLoading = false;
            });
    }
    getOpponentCode(value) {
        if (value != '') {
            this.getIssueName(value);
        }
    }
    //  获取发行人名称下拉框
    private getIssueName(cIssueName): void {
        this.$axios
            .post('/tnIssueExtra/queryIssueName', {
                cIssueName,
            })
            .then((res: any) => {
                this.issueNameSelect = res;
            });
    }
    // 获取内部评级下拉框
    private getInsideAppraise(): void {
        this.$axios.get('/tnIssueExtra/queryInnerGrade2').then((res: any) => {
            // console.log('内部：', res);
            this.instructionSelect = res;
        });
    }
    // 获取外部评级下拉框
    private getOuterAppraise(): void {
        this.$axios.get('/tnIssueExtra/queryOuterGrade2').then((res: any) => {
            // console.log('外部：', res);
            this.outerAppraiseSelect = res;
        });
    }
    // 分页
    private handleCurrentChange(): void {
        this.getInstruction(this.searchParam, this.pages);
    }
    // 排序改变
    private changeTableSort(column: any): void {
        // this.sortProp = column.prop;
        // this.sortOrder = column.order;
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        this.searchParam['sort'] = this.findName(column.prop, sortType);
        this.pages.currentPage = 1;
        this.getInstruction(this.searchParam, this.pages);
    }
    // 获取排序字段名称
    private findName(name: string, order: string): string {
        let value = '';
        if (order != '') {
            switch (name) {
                case 'cIssueCode':
                    value = 'to_number(C_ISSUE_CODE)' + ' ' + order;
                    break;
                case 'cIssueName':
                    value = 'C_ISSUE_NAME' + ' ' + order;
                    break;
                case 'fullName':
                    value = 'VC_FULL_NAME' + ' ' + order;
                    break;
                case 'cLinkman':
                    value = 'C_LINKMAN' + ' ' + order;
                    break;
                case 'cPhone':
                    value = 'C_PHONE' + ' ' + order;
                    break;
                case 'cFax':
                    value = 'C_FAX' + ' ' + order;
                    break;
                case 'nNetAsset':
                    value = 'to_number(N_NET_ASSET)' + ' ' + order;
                    break;
                case 'nTotalAsset':
                    value = 'to_number(N_TOTAL_ASSET)' + ' ' + order;
                    break;
                case 'cCountryNo':
                    value = 'C_COUNTRY_NO' + ' ' + order;
                    break;
                case 'cAppraiseOrgan':
                    value = 'C_APPRAISE_ORGAN' + ' ' + order;
                    break;
                case 'cInnerGrade2':
                    value = 'C_INNER_GRADE2' + ' ' + order;
                    break;
                case 'cOuterGrade2':
                    value = 'C_OUTER_GRADE2' + ' ' + order;
                    break;
                case 'enAssetLiabilityRatio':
                    value = 'EN_ASSET_LIABILITY_RATIO' + ' ' + order;
                    break;
                case 'enLastYearNet':
                    value = 'EN_LAST_YEAR_NET' + ' ' + order;
                    break;
                case 'lastquarterAsset':
                    value = 'L_LASTQUARTER_ASSET' + ' ' + order;
                    break;
            }
        } else {
            value = 'to_number(C_ISSUE_CODE) ASC';
        }
        return value;
    }
    setFormat(row, column) {
        if (!thousandsFormat(row[column['property']])) {
            return '--';
        }
        return thousandsFormat(row[column['property']]);
    }
    getValueIs(row, column) {
        if ((row[column['property']] == null || row[column['property']] == ' ' || row[column['property']] == '空') && row[column['property']] !== 0) {
            return '--';
        } else {
            return row[column['property']];
        }
    }
    tableRowClassName({ row, rowIndex }) {
        // console.log(rowIndex);
        if (rowIndex % 2 === 0) {
            return 'odd-row';
        } else {
            return 'even-row';
        }
    }

    /**
     * 获取发行人分组
     */
    private getcIssueGroups(): void {
        this.$axios.post('/tnIssueExtra/queryIssueGroup').then((res: any) => {
            this.cIssueGroups = res || [];
        });
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-table .odd-row {
    background: #ffffff;
}
/deep/ .el-table .even-row {
    background: #fafafa;
}
/deep/ .el-input__inner {
    height: 28px;
    line-height: 28px;
}
/deep/.el-input__icon {
    line-height: 42px !important;
}
// 滚动条的宽度
/deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 7px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
    border-radius: 3.5px;
}
#header-content {
    width: 100%;
    border: 1px solid #d7d7d7;
    height: 48px;
    line-height: 48px;
    // border: 1px solid red;
    overflow: hidden;
    .el-form {
        width: 100%;
        // border: 1px solid blue;
        .el-col {
            // border: 1px solid green;
            display: flex;
            align-items: center;
            .el-form-item {
                margin-top: 4px;
                /deep/.el-form-item__label {
                    color: black;
                }
                /deep/ .el-select {
                    .el-select__caret:first-child::before {
                        content: '\e6e1';
                    }
                    .is-focus {
                        .el-select__caret:first-child {
                            transform: rotateZ(0deg);
                        }
                    }
                }
            }
            .el-button {
                margin-top: 8px;
                margin-right: 20px;
            }
            .el-button:nth-child(2) {
                background: white;
                color: black;
            }
        }
        .el-col:first-of-type {
            margin-left: 30px;
        }
    }
    .btn {
        position: absolute;
        top: 0;
        right: 30px;
        .el-button:nth-child(2) {
            background: white;
            color: black;
        }
    }
}
#main-content {
    margin-top: 10px;
    // overflow: auto;
    .content-table {
        width: 100%;
        height: calc(100vh - 150px);
        overflow: auto;
        margin: 0 auto;
        .el-table {
            border: 1px solid #d7d7d7;
        }
    }
}
/deep/ .el-input__icon {
    line-height: 25px !important;
}
</style>
